<template>
    <el-row v-loading="loading">
        <el-col :span="24" class="col-back">
            <el-button type="text" icon="el-icon-back" @click="goBack">返回</el-button>
        </el-col>
        <el-col :span="24">
            <h3 class="title">{{article.title}}</h3>
        </el-col>
        <el-col :span="24" class="col-author">
            <span>{{article.userNickName}}</span>
            <span>浏览 {{article.viewCount}}</span>
            <span>{{article.editTime|formatDateTime}}</span>
        </el-col>
        <el-col :span="24" class="col-content">
            <p v-html="article.htmlContent"></p>
        </el-col>
    </el-row>
</template>

<script>
    import {get} from "../utils/api";

    export default {
        data() {
            return {
                loading: false,
                article: []
            }
        },
        mounted() {
            let articleId = this.$route.query.articleId;
            this.getArticleById(articleId);
        },
        methods: {
            getArticleById(articleId) {
                this.loading = true
                get('/article/details', {id: articleId}).then(res => {
                    this.loading = false;
                    if (res.status === 0) {
                        this.article = res.data;
                    } else {
                        this.$message.error(res.msg);
                    }
                });
            },

            goBack() {
                this.$router.go(-1);
            }
        }
    }
</script>

<style scoped lang="stylus">
    .el-row {
        .col-back {
            display flex
            justify-content flex-start
        }

        .col-author {
            display flex
            justify-content flex-end

            span {
                margin 8px
                color #20a0ff
                font-size 13px
            }
        }

        .col-content {
            text-align left
            line-height 1.3em
            color black
            text-indent 2em
        }
    }
</style>
